<template>
  <el-dialog
    title="人员位置详情"
    :visible.sync="dialogVisible"
    width="70%"
    :close-on-click-modal="false"
    :before-close="close"
  >
    <div>
      <ul class="oneUl">
        <li>
          <span>员工姓名: </span><span>{{ recordData.name }}</span>
        </li>
        <li>
          <span>RFID: </span><span>{{ recordData.rfid }}</span>
        </li>
        <li>
          <span>门禁ID: </span><span>{{ recordData.accessCardID }}</span>
        </li>
      </ul>
      <ul class="twoUl">
        <li>
          <span>部门: </span><span>{{ recordData.department }}</span>
        </li>
        <li>
          <span>职务: </span><span>{{ recordData.job }}</span>
        </li>
        <li>
          <span>工种: </span><span>{{ recordData.work }}</span>
        </li>
      </ul>
    </div>
    <ListTable
      ref="RefTableList"
      :page="true"
      :loading="tableLoading"
      :table-data="tableData"
      :table-col="tableCol"
    >
    </ListTable>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button
        :loading="loadingSubmit"
        type="primary"
        @click="handleSubmit"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { eleValidator } from '@/utils/tools'
  import listMixin from '@/mixins/list'
  export default {
    mixins: [dialogEditMixin, listMixin],
    data() {
      return {
        tableLoading: false,
        // 人员信息
        recordData: {
          name: '',
          RFID: '',
          accessCardID: '',
          department: '',
          job: '',
          work: ''
        },
        tableData: [],
        tableCol: [
          { prop: 'name', label: '序号' },
          { prop: 'loginName', label: '所在区域' },
          { prop: 'name', label: '读卡设备名称' },
          { prop: 'loginName', label: '进入区域时间' },
          { prop: 'name', label: '离基站位置' },
          { prop: 'loginName', label: '离洞口位置' },
          { prop: 'name', label: '进入隧道时间' }
        ],
        apiKey: {
          search: '/User/',
          add: '/User',
          put: '/User/'
        }
      }
    },
    watch: {
      searchValue: function (newValue, oldValue) {
        console.log(newValue)
        let people = newValue.employee
        this.recordData = {
          name: people.name,
          rfid: people.rfid,
          accessCardID: people.accessCardID,
          // department: people.department.deptName,
          // job: people.job.jobTitle,
          // work: people.work.workName
        }
        // this.tableData = resData.map(item => {
        //   item.loadingEdit = false
        //   item.loadingDel = false
        //   return item
        // })
        // this.$nextTick(() => {
        //   this.$refs.RefDetailsTableList.update({ page: pageIndex, count }, bln)
        //   this.tableLoading = false
        // })
      }
    },
    methods: {
      // 请求列表数据
      // async getList(query) {
      //   this.tableLoading = true
      //   try {
      //     let obj = { pageIndex: 1, pageSize: 10 }
      //     const { data: { items: resData, count, pageIndex } } = await user('get', obj, false)
          
      //     this.tableData = resData.map(item => {
      //       item.loadingEdit = false
      //       item.loadingDel = false
      //       return item
      //     })
      //     this.$nextTick(() => {
      //       this.$refs['RefListTable'].update({ page: pageIndex, count })
      //       this.tableLoading = false
      //     })
      //   } catch (err) {
      //     this.tableLoading = false
      //     console.error('getList err: ', err)
      //   }
      // },
      resetFormData() {
        this.formData = {
          loginName: '',
          name: '',
          password: '',
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .oneUl,.twoUl {
    margin: 0;
    padding: 0;
    display: flex;
    li {
      flex: 1;
      list-style: none;
    }
  }
</style>
